<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>订单管理 - 快递代拿系统</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="x-ua-compatible" content="ie=edge">

    <link rel="stylesheet" href="../../../assets/css/bootstrap.css"/>
    <link rel="stylesheet" href="../../../assets/css/bootstrap-table.css"/>
    <link rel="stylesheet" href="../../../assets/css/express.css">
</head>
<body>
<div class="container-fluid">
    <!-- 顶栏 -->
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand">快递代拿管理系统</a>
            </div>
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav navbar-right">
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                            <div id="showUser"><span class="caret"></span></div>
                        </a>
                        <ul class="dropdown-menu">
                            <li><a href="/logout">注销</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    <!-- 主体 -->
    <div class="row">
        <!-- 左侧菜单 -->
        <div class="col-md-2">
            <ul class="nav nav-pills nav-stacked" id="nav">
                <li class="active"><a href="/admin/express">订单管理<span class="glyphicon glyphicon-tasks pull-right"/></a></li>
                <li><a href="/admin/staff">人员管理<span class="glyphicon glyphicon-user pull-right"/></a></li>
                <li><a href="/admin/expressRecycle">订单回收<span class="glyphicon glyphicon-trash pull-right"/></a></li>
                <li><a href="/admin/feedback">用户反馈<span class="glyphicon glyphicon-envelope pull-right"/></a></li>
                <li><a href="/admin/password">重置密码<sapn class="glyphicon glyphicon-pencil pull-right" /></a></li>
                <li><a href="/logout">退出系统<sapn class="glyphicon glyphicon-log-out pull-right" /></a></li>
            </ul>
        </div>
        <!-- 右侧数据 -->
        <div class="panel col-md-10">
            <!-- 筛选条件 -->
            <div class="panel-heading">
                <form class="form-inline">
                    <div class="form-group">
                        <label for="inputStatus">订单状态</label>
                        <select id="inputStatus" class="form-control">
                            <option value="-1">所有状态</option>
                        </select>
                    </div>
                    <div class="form-group ml10">
                        <label for="inputIncludeDay">查询日期</label>
                        <select id="inputIncludeDay" class="form-control">
                            <option value="-1">无</option>
                            <option value="1">1日内</option>
                            <option value="3">3日内</option>
                            <option value="7">7日内</option>
                            <option value="30">30日内</option>
                        </select>
                    </div>
                    <div class="form-group ml10">
                        <label for="inputStartDate" class="ml10">起</label>
                        <input type="date" id="inputStartDate" class="form-control ml10">
                        <label for="inputEndDate" class="ml10">讫</label>
                        <input type="date" id="inputEndDate" class="form-control ml10">
                    </div>
                    <div class="form-group">
                        <label for="inputStaffName" class="ml10">配送员</label>
                        <input type="text" class="form-control" id="inputStaffName">
                    </div>
                </form>
                <form class="form-inline pt10">
                    <div class="form-group">
                        <label for="inputId">订单号</label>
                        <input type="text" class="form-control" id="inputId">
                    </div>
                    <div class="form-group">
                        <label for="inputName" class="ml10">姓名</label>
                        <input type="text" class="form-control" id="inputName">
                    </div>
                    <div class="form-group">
                        <label for="inputTel" class="ml10">联系电话</label>
                        <input type="text" class="form-control" id="inputTel" onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')">
                    </div>
                    <div class="form-group">
                        <label for="inputAddress" class="ml10">地址</label>
                        <input type="text" class="form-control" id="inputAddress">
                    </div>
                    <button type="button" class="btn btn-info ml10" onclick="flushTable()">条件查询</button>
                </form>
            </div>
            <div class="panel-body">
                <div id="toolbar" class="btn-group">
                    <button id="btn_assign" type="button" class="btn btn-default">
                        <span class="glyphicon glyphicon-check" aria-hidden="true"></span> 分配
                    </button>
                    <button id="btn_error" type="button" class="btn btn-default">
                        <span class="glyphicon glyphicon-alert" aria-hidden="true"></span> 异常
                    </button>
                    <button id="btn_delete" type="button" class="btn btn-default">
                        <span class="glyphicon glyphicon-remove" aria-hidden="true"></span> 删除
                    </button>
                </div>
                <table id="tb_express"></table>
            </div>
            <!-- 分配订单模态框 -->
            <div class="modal fade" id="assignModel" tabindex="-1" role="dialog" aria-labelledby="assignModelLabel">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                            <h4 class="modal-title" id="assignModelLabel">分配订单</h4>
                        </div>
                        <div class="modal-body">
                            <form class="form-horizontal">
                                <div class="form-group">
                                    <label for="inputStaffSelect" class="col-sm-2 control-label">配送人员</label>
                                    <div class="col-sm-10">
                                        <select id="inputStaffSelect" class="form-control">
                                        </select>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-primary" id="assignBtn">分配</button>
                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 确认订单模态框 -->
            <div class="modal fade" id="confirmModel" tabindex="-1" role="dialog" aria-labelledby="confirmModelLabel">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                            <h4 class="modal-title" id="confirmModelLabel">确认订单</h4>
                        </div>
                        <div class="modal-body">
                            <form class="form-horizontal" id="confirmForm">
                                <div class="form-group">
                                    <label class="col-sm-4 control-label" for="confirmId">订单号：</label>
                                    <div class="col-sm-8">
                                        <input class="form-control" id="confirmId" name="expressId" readonly="readonly">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-4 control-label" for="confirmName">姓名：</label>
                                    <div class="col-sm-8">
                                        <p class="form-control-static" id="confirmName"></p>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-4 control-label" for="confirmPaymentType">支付方式：</label>
                                    <div class="col-sm-8">
                                        <p class="form-control-static" id="confirmPaymentType"></p>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-4 control-label" for="confirmPaymentOnline">线上支付：</label>
                                    <div class="col-sm-8">
                                        <p class="form-control-static" id="confirmPaymentOnline"></p>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-4 control-label" for="confirmPaymentOffline">线下支付（多退少补）：</label>
                                    <div class="col-sm-8">
                                        <input class="form-control" id="confirmPaymentOffline" name="offlinePayment" type="number">
                                    </div>
                                </div>
                            </form>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-primary" id="confirmBtn">确认</button>
                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 订单详情模态框 -->
            <div class="modal fade" id="infoModel" tabindex="-1" role="dialog" aria-labelledby="infoModelLabel">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                            <h4 class="modal-title" id="infoModelLabel">订单详情</h4>
                        </div>
                        <div class="modal-body">
                            <form class="form-horizontal">
                                <div class="form-group">
                                    <label for="inputInfoId" class="col-sm-2 control-label">订单号</label>
                                    <div class="col-sm-10">
                                        <p class="form-control-static" id="inputInfoId"></p>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="inputInfoName" class="col-sm-2 control-label">姓名</label>
                                    <div class="col-sm-10">
                                        <p class="form-control-static" id="inputInfoName"></p>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="inputInfoMessage" class="col-sm-2 control-label">快递短信</label>
                                    <div class="col-sm-10">
                                        <p class="form-control-static" id="inputInfoMessage"></p>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="inputInfoAddress" class="col-sm-2 control-label">配送地址</label>
                                    <div class="col-sm-10">
                                        <p class="form-control-static" id="inputInfoAddress"></p>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="inputInfoRemark" class="col-sm-2 control-label">备注</label>
                                    <div class="col-sm-10">
                                        <p class="form-control-static" id="inputInfoRemark"></p>
                                    </div>
                                </div>
                                <hr>
                                <div class="form-group">
                                    <label for="inputInfoPayment" class="col-sm-2 control-label">支付方式</label>
                                    <div class="col-sm-10">
                                        <p class="form-control-static" id="inputInfoPayment"></p>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="inputInfoPaymentOnline" class="col-sm-2 control-label">线上支付</label>
                                    <div class="col-sm-10">
                                        <p class="form-control-static" id="inputInfoPaymentOnline"></p>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="inputInfoPaymentOffline" class="col-sm-2 control-label">线下支付</label>
                                    <div class="col-sm-10">
                                        <p class="form-control-static" id="inputInfoPaymentOffline"></p>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="inputInfoStatus" class="col-sm-2 control-label">订单状态</label>
                                    <div class="col-sm-10">
                                        <p class="form-control-static" id="inputInfoStatus"></p>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="inputInfoStaff" class="col-sm-2 control-label">配送员</label>
                                    <div class="col-sm-10">
                                        <p class="form-control-static" id="inputInfoStaff"></p>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="inputInfoStaffRemark" class="col-sm-2 control-label">配送备注</label>
                                    <div class="col-sm-10">
                                        <p class="form-control-static" id="inputInfoStaffRemark"></p>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="inputInfoDate" class="col-sm-2 control-label">下单时间</label>
                                    <div class="col-sm-10">
                                        <p class="form-control-static" id="inputInfoDate"></p>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="../../../assets/js/jquery3.3.1.min.js"></script>
<script src="../../../assets/js/bootstrap.min.js"></script>
<script src="../../../assets/js/bootstrap-table.min.js"></script>
<script src="../../../assets/js/bootstrap-table-zh-CN.min.js"></script>
<script src="../../../assets/js/bootstrap-table-export.min.js"></script>
<script src="../../../assets/js/tableExport.min.js"></script>
<script src="../../../assets/layer/layer.js"></script>
<script src="../../../assets/js/http.js"></script>
<script type="text/javascript">
    $(function () {
        //1、初始化Table
        var oTable = new TableInit();
        oTable.Init();

        //2、初始化Button的点击事件
        var oButtonInit = new ButtonInit();
        oButtonInit.Init();

        // 获取登录名
        sendJson("get", "/username", {}, true, function (res) {
            if (res.status) {
                $("#showUser").text(res.data);
            }
        }, function () {
            layer.msg("未知错误",{icon:2});
        });

        // 初始化订单状态下拉框
        sendJson("get", "/admin/express/status", {}, true, function (res) {
            if (res.status) {
                var html = '<option value="-1">所有状态</option>';
                for(var i=0;i<res.data.length;i++) {
                    html += '<option value="'+res.data[i].id+'">'+res.data[i].name+'</option>';
                }
                document.getElementById("inputStatus").innerHTML = html;
            }
        }, function () {
            layer.msg("未知错误",{icon:2});
        });
    });

    var TableInit = function () {
        var oTableInit = new Object();
        //初始化Table
        oTableInit.Init = function () {
            $('#tb_express').bootstrapTable({
                url: '/admin/express/list',         //请求后台的URL（*）
                method: 'get',                      //请求方式（*）
                toolbar: '#toolbar',                //工具按钮组id
                striped: true,                      //是否显示行间隔色
                cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
                pagination: true,                   //是否显示分页（*）
                sortable: false,                    //是否启用排序
                sortOrder: "asc",                   //排序方式
                queryParams: oTableInit.queryParams,//传递参数（*）
                sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
                pageNumber:1,                       //初始化加载第一页，默认第一页
                pageSize: 10,                       //每页的记录行数（*）
                pageList: [10, 25, 50, 100],        //可供选择的每页的行数（*）
                search: false,                       //是否显示表格搜索，此搜索是客户端搜索，不会进服务端。后台分页时意义不大
                showColumns: true,                  //是否显示所有的列
                showRefresh: true,                  //是否显示刷新按钮
                minimumCountColumns: 2,             //最少允许的列数
                clickToSelect: true,                //是否启用点击选中行
                // height: 750,                        //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
                uniqueId: "id",                     //每一行的唯一标识，一般为主键列
                showToggle:false,                   //是否显示详细视图和列表视图的切换按钮
                cardView: false,                    //是否显示详细视图
                detailView: false,                  //是否显示父子表
                showExport: true,                   //是否显示导出
                exportDataType: "basic",            //导出的模式是当前页basic、所有数据all、选中数据selected。
                columns: [{
                    checkbox: true
                }, {
                    field: 'id',
                    title: '订单号'
                }, {
                    field: 'name',
                    title: '姓名'
                }, {
                    field: 'tel',
                    title: '联系电话'
                }, {
                    field: 'address',
                    title: '地址',
                    width: 200
                }, {
                    field: 'createDate',
                    title: '下单时间'
                }, {
                    field: 'staffName',
                    title: '配送员'
                }, {
                    field: 'statusName',
                    title: '订单状态',
                    formatter: statusFormatter
                }, {
                    field: 'id',
                    title: '操作',
                    width: 120,
                    align: 'left',
                    valign: 'middle',
                    formatter: actionFormatter
                }]
            });
        };

        // 传递给后台的参数
        oTableInit.queryParams = function (params) {
            return {   //这里的键的名字和后台参数必须一致
                rows: params.limit,                         //页面大小
                page: (params.offset / params.limit) + 1,   //页码
                // 筛选参数
                hasDelete: false,
                status: $("#inputStatus").val(),
                includeDay: $("#inputIncludeDay").val(),
                startDate: $("#inputStartDate").val(),
                endDate: $("#inputEndDate").val(),
                staffName: $("#inputStaffName").val(),
                id: $("#inputId").val(),
                tel: $("#inputTel").val(),
                name: $("#inputName").val(),
                address: $("#inputAddress").val()
            };
        };
        return oTableInit;
    };

    var ButtonInit = function () {
        var oInit = new Object();

        oInit.Init = function () {
            // 分配订单
            $("#btn_assign").click(function () {
                var row = $('#tb_express').bootstrapTable("getSelections");
                // 获取所有等待派送（1）的选中订单
                if(row.length > 0) {
                    var ids = new Array();
                    for(var i=0;i<row.length;i++) {
                        if(row[i].status === 1) {
                            ids.push(row[i].id);
                        }
                    }
                    if(ids.length === 0) {
                        layer.msg("选中的没有可配送的订单",{icon:0});
                        return false;
                    } else {
                        var msg = "即将分配订单：" + ids + "，确认执行？";
                        if(!confirm(msg)) {
                            return false;
                        }
                        // 显示派送人员模态框
                        var html = "";
                        sendJson("get", "/admin/staff/listName", {}, false, function (res) {
                            if(res.status) {
                                for(var i=0;i<res.data.length;i++) {
                                    html += '<option value="'+res.data[i].id+'">'+res.data[i].username+'</option>';
                                }
                            }
                        }, function () {
                            layer.msg("未知错误",{icon:2});
                        });
                        document.getElementById("inputStaffSelect").innerHTML = html;
                        $("#assignModel").modal("show");

                        // 点击模态框分配按钮后
                        $("#assignBtn").click(function () {
                            $("#assignModel").modal("hide");
                            var staffId = $("#inputStaffSelect").val();
                            sendArray("post", "/admin/express/assign", {"ids": ids, "staffId":staffId}, false, function (res) {
                                // 当操作成功时，刷新表格
                                if(res.status) {
                                    flushTable();
                                }
                            }, function () {
                                layer.msg("未知错误",{icon:2});
                            });
                        });
                    }
                }
            });

            // 异常订单
            $("#btn_error").click(function () {
                var row = $('#tb_express').bootstrapTable("getSelections");
                // 获取所有派送中（2）的选中订单
                if(row.length > 0) {
                    var ids = new Array();
                    for (var i = 0; i < row.length; i++) {
                        if (row[i].status === 2) {
                            ids.push(row[i].id);
                        }
                    }
                    if (ids.length === 0) {
                        layer.msg("选中的没有可异常的订单",{icon:0});
                        return false;
                    } else {
                        layer.confirm("即将异常订单：" + ids + "，确认执行？", {
                            btn: ['确定','取消']
                        }, function(){
                            layer.prompt({title:"异常信息"},function(val, index) {
                                sendArray("post", "/admin/express/error", {"ids": ids, "text":val}, false, function (res) {
                                    if(res.status) {
                                        layer.msg("操作成功",{icon:1});
                                        layer.close(index);
                                        flushTable();
                                    }
                                }, function () {
                                    layer.msg("未知错误",{icon:2});
                                });
                            });
                        }, function(){
                        });
                    }
                }
            });

            // 删除订单
            $("#btn_delete").click(function () {
                var row = $('#tb_express').bootstrapTable("getSelections");
                if (row.length > 0) {
                    var ids = new Array();
                    for (var i = 0; i < row.length; i++) {
                        ids.push(row[i].id);
                    }

                    layer.confirm("即将删除订单：" + ids + "，删除后将被移入回收站，确认执行？", {
                        btn: ['确定','取消']
                    }, function(){
                        sendArray("post", "/admin/express/delete", {"ids": ids}, false, function (res) {
                            // 当操作成功时，刷新表格
                            if (res.status) {
                                layer.msg('删除成功', {icon: 1});
                                flushTable();
                            } else {
                                layer.msg('删除失败', {icon: 2});
                            }
                        }, function () {
                            layer.msg("未知错误",{icon:2});
                        });
                    }, function(){
                    });
                }
            });
        };
        return oInit;
    };
    //操作栏的格式化
    function actionFormatter(value, row, index) {
        var id = "'" + value + "'";
        //只有状态为派送中（2），才能确认
        var result;
        if(row.status === 2) {
            result = '<button class="btn btn-xs btn-info" onclick="showExpress('+id+')" title="查看"><span class="glyphicon glyphicon-search"></span></button>\n' +
                '         <button class="btn btn-xs btn-primary" onclick="confirmExpress('+id+')" title="确认"><span class="glyphicon glyphicon-ok"></span></button>\n' +
                '         <button class="btn btn-xs btn-danger" onclick="deleteExpress('+id+')" title="删除"><span class="glyphicon glyphicon-remove"></span></button>';
        } else {
            result = '<button class="btn btn-xs btn-info" onclick="showExpress('+id+')" title="查看"><span class="glyphicon glyphicon-search"></span></button>\n' +
                '         <button class="btn btn-xs btn-danger" onclick="deleteExpress('+id+')" title="删除"><span class="glyphicon glyphicon-remove"></span></button>';
        }

        return result;
    }

    // 订单状态的格式化
    function statusFormatter(value, row, index) {
        if(value === '订单异常')
            return '<span style="color:red">'+value+'</span>';
        else if (value === '订单完成')
            return '<span style="color:olivedrab">'+value+'</span>';
        else if (value === '派送中')
            return '<span style="color:#42afff">'+value+'</span>';
        else if (value === '等待派送')
            return '<span style="color:grey">'+value+'</span>';
    }
    
    function flushTable() {
        $("#tb_express").bootstrapTable('refresh',{url : '/admin/express/list'} );
    }

    // 查看订单
    function showExpress(id) {
        sendJson("get", "/admin/express/" + id, {}, false, function (res) {
            if (res.status) {
                // 初始化模态框信息
                var data = res.data;
                $("#inputInfoId").text(data.id);
                $("#inputInfoName").text(data.name);
                $("#inputInfoMessage").text(data.message);
                $("#inputInfoAddress").text(data.address);
                $("#inputInfoRemark").text(data.remark);
                $("#inputInfoPayment").text(data.paymentType);
                $("#inputInfoPaymentOnline").text(data.onlinePayment);
                $("#inputInfoPaymentOffline").text(data.offlinePayment);
                $("#inputInfoStatus").html(data.statusName);
                $("#inputInfoStaff").text(data.staffName);
                $("#inputInfoStaffRemark").text(data.staffRemark);
                $("#inputInfoDate").text(data.createDate);

                $("#infoModel").modal("show");
            } else {
                layer.msg("获取订单详情失败",{icon:2});
            }
        }, function () {
            layer.msg("未知错误",{icon:2});
        });
    }

    // 确认订单
    function confirmExpress(id) {
        var msg = "即将确认订单：" + id + "，确认执行？";
        if(confirm(msg)) {
            sendJson("get", "/admin/express/" + id, {}, false, function (res) {
                if (res.status) {
                    // 初始化模态框信息
                    var data = res.data;
                    $("#confirmId").val(data.id);
                    $("#confirmName").text(data.name);
                    $("#confirmPaymentType").text(data.paymentType);
                    $("#confirmPaymentOnline").text(data.onlinePayment);
                    $("#confirmPaymentOffline").val(data.offlinePayment);

                    $("#confirmModel").modal("show");
                } else {
                    layer.msg("获取订单详情失败",{icon:2});
                }
            }, function () {
                layer.msg("未知错误",{icon:2});
            });

            $("#confirmBtn").click(function () {
                var offlinePayment = $("#confirmPaymentOffline").val();
                if(offlinePayment === "") {
                    layer.msg("线下支付金额不能为空",{icon:0});
                    return false;
                }
                $("#confirmModel").modal("hide");
                sendArray("post", "/admin/express/confirm", $("#confirmForm").serialize() , false, function (res) {
                    // 当操作成功时，刷新表格
                    if(res.status) {
                        flushTable();
                    }
                }, function () {
                    layer.msg("未知错误",{icon:2});
                });
            });
        }
    }

    // 删除订单
    function deleteExpress(id) {
        layer.confirm("即将删除订单：" + id + "，删除后将被移入回收站，确认执行？", {
            btn: ['确定','取消']
        }, function(){
            sendArray("post", "/admin/express/delete", {"ids": id}, false, function (res) {
                // 当操作成功时，刷新表格
                if (res.status) {
                    layer.msg('删除成功', {icon: 1});
                    flushTable();
                } else {
                    layer.msg('删除失败', {icon: 2});
                }
            }, function () {
                layer.msg("未知错误",{icon:2});
            });
        }, function(){
        });
    }
</script>
</body>
</html>